<template>
  <div class="rscc-stat-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>财产统计</span>
      </div>
      <div class="stat-cards">
        <div class="stat-card" v-for="stat in stats" :key="stat.label">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
      <div class="charts-section">
        <div class="chart-card">
          <div class="chart-title">资产分布</div>
          <div ref="pieChart" class="chart"></div>
        </div>
        <div class="chart-card">
          <div class="chart-title">资产变化趋势</div>
          <div ref="lineChart" class="chart"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'RsccCctjView',
  data() {
    return {
      stats: [
        { label: '消耗金', value: '¥ 120,000' },
        { label: '现有金', value: '¥ 80,000' },
        { label: '已挣金', value: '¥ 200,000' },
      ],
      pieChart: null,
      lineChart: null,
    }
  },
  mounted() {
    this.initPieChart();
    this.initLineChart();
    window.addEventListener('resize', this.resizeCharts);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts);
    if (this.pieChart) this.pieChart.dispose();
    if (this.lineChart) this.lineChart.dispose();
  },
  methods: {
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart);
      this.pieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [{
          name: '资产分布',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 80000, name: '现金' },
            { value: 120000, name: '消耗金' },
            { value: 200000, name: '已挣金' },
          ],
        }],
      });
    },
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart);
      this.lineChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        },
        yAxis: { type: 'value' },
        series: [{
          name: '资产总额',
          type: 'line',
          data: [100000, 120000, 150000, 180000, 210000, 280000],
          smooth: true,
          areaStyle: { color: 'rgba(74,158,255,0.15)' },
          lineStyle: { color: '#4a9eff', width: 3 },
          symbol: 'circle',
          symbolSize: 10,
        }],
        grid: { left: 30, right: 20, top: 40, bottom: 30 },
      });
    },
    resizeCharts() {
      if (this.pieChart) this.pieChart.resize();
      if (this.lineChart) this.lineChart.resize();
    },
  },
}
</script>
<style scoped>
.rscc-stat-page { padding: 30px; }
.stat-cards { display: flex; gap: 30px; margin-bottom: 30px; }
.stat-card { flex: 1; background: #f5f7fa; border-radius: 12px; padding: 24px; text-align: center; font-size: 20px; color: #2c3e50; box-shadow: 0 2px 6px rgba(74,158,255,0.04); }
.stat-value { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.stat-label { color: #7f8c9a; font-size: 15px; }
.charts-section { display: flex; gap: 30px; }
.chart-card { flex: 1; background: white; border-radius: 16px; box-shadow: 0 2px 6px rgba(74,158,255,0.04); padding: 24px 24px 12px 24px; display: flex; flex-direction: column; min-width: 320px; }
.chart-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 18px; }
.chart { width: 100%; height: 260px; }
</style> 